<template>
	<view class="picture-container">
        <u-card margin="0rpx" :show-head="false">
            <view slot="body" @click="gotoBotany(plant.botanyId)">
                <u-image width="100%" height="220rpx" :src="plant.src" shape="square" border-radius="4"></u-image>
                <view class="desc-name">{{ plant.name }}</view>
            </view>
        </u-card>
	</view>
</template>

<script>
    import {mapState} from 'vuex';
	export default {
        props: ['plant'],
		data() {
			return {
				
			};
		},
        methods: {
            gotoBotany(id) {
                uni.navigateTo({
                    url: `/pages/botany/botany?botanyId=${id}`
                })
            }
        }
	}
</script>

<style lang="less" scoped>
    .picture-container {
        padding: 15rpx;
        
        .u-card__head {
            padding: 0;
        }
        .desc-name {
            text-align: center;
            letter-spacing: 2rpx;
            font-size: 36rpx;
            margin-top: 44rpx;
            margin-bottom: 12rpx;
            font-weight: bold;
            color: #000;
        }
    }
</style>
